<template>
  <div style="height:100%" ref="charts"></div>
</template>

<script>
//  series  因为 代表渲染成什么样子的图表 就是每一个数据要渲染成什么样的图表  柱状图或者折线图都是通过这个来定义的
import echarts from "echarts";
export default {
  name: "Eachrts",
  props: {
    // 数据是有父组件传递过来的
    chartData: {
      type: Object,
      default() {
        return {
          // 默认返回的是又坐标轴的x轴和y轴展示数据
          xData: [],
          //series  因为 代表渲染成什么样子的图表
          series: [],
        };
      },
    },
    //   判断图表是什么类型的
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 默认实例
      echart: null,
      // 有轴的数据选项
      axisOption: {
        // 图例组件文字的颜色。
        legend: {
          textStyle: {
            color: "#333",
          },
        },
        //提示框组件。
        tooltip: {
          // 坐标轴触发
          trigger: "axis",
        },
        // 配置图表的偏移
        grid: {
          left: "20%",
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          // 刻度标签文字的颜色，
          axisLabel: {
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            // 坐标轴线线的颜色
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: [
          "#2ec7c9",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089",
        ],
        series: [],
      },
      // 无轴的数据选项
      normaOption: {
        tooltip: {
          trigger: "item",
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf",
        ],
        series: [],
      },
    };
  },
  computed: {
    //  设计一个计算属性 来判断 那个图表data数据中的配置属性
    options() {
      // 是有轴的话就用有轴的 配置数据
      return this.isAxisChart ? this.axisOption : this.normaOption;
    },
    //获取veux中折叠菜单的状态
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
  // 什么时候去初始化图表呢  监听chartdata的形式 就是通过传递进来的时候  发生变化的时候
  watch: {
    chartData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
    //监听折叠菜单的变化 加上和定时器 配合动画效果
    isCollapse() {
      setTimeout(() => {
        this.resizeChart();
      }, 300);
    },
  },
  mounted() {
    // 浏览器的事件调用
    window.addEventListener("resize", this.resizeChart);
  },
  destroyed() {
    //防止内存泄漏就要去这个组件销毁的时候 同时要把这个事件给销毁
    window.addEventListener("resize", this.resizeChart);
  },
  methods: {
    // 定义一个方法渲染这个图表
    initChart() {
      // 初始化图表的是 先去渲染这个数据 再去初始化图表配置展示
      this.initChartData();
      // 有值的话就直接进行配置
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        // 先实例化在进行配置
        this.echart = echarts.init(this.$refs.charts);
        this.echart.setOption(this.options);
      }
    },
    // 根据图表类型 来初始化图表数据
    initChartData() {
      // 是坐标轴图表的话 怎么做 不是的话又怎么做
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.chartData.xData;
        this.axisOption.series = this.chartData.series;
      } else {
        //没有坐标的话就直接传递
        this.normaOption.series = this.chartData.series;
      }
    },

    //监听浏览器宽度的变化的是否调用echats组件下的一个方法
    resizeChart() {
      this.echart ? this.echart.resize() : "";
    },
  },
};
</script>

<style lang="sass" scoped>

</style>
